<template>
  <div class="regist">
    <!-- 顶部导航 -->
    <itemnavbar />
    <!-- 输入区域 -->
    <mt-field
      label="用户名"
      placeholder="请输入用户名"
      disableClear
      v-model="username"
      :state="usernameState"
      @blur.native.capture="checkName"
    >
    </mt-field>
    <mt-field
      label="邮箱"
      placeholder="请输入邮箱"
      type="email"
      disableClear
      v-model="email"
      :state="emailState"
      @blur.native.capture="checkEmail"
    >
    </mt-field>
    <mt-field
      label="密码"
      placeholder="请输入密码"
      type="password"
      disableClear
      v-model="password"
      :state="passwordState"
      @blur.native.capture="checkPwd"
    >
    </mt-field>
    <mt-field
      label="手机号"
      placeholder="请输入手机号"
      type="tel"
      disableClear
      v-model="phone"
      :state="phoneState"
      @blur.native.capture="checkPhone"
    >
    </mt-field>
    <div class="denglu" style="margin: 16px">
      <van-button
        class="dd"
        round
        block
        native-type="submit"
        :disabled="loading"
        style="background: #e4004f; color: #fff; line-height: 30px"
        @click="checkForm"
        >立即注册</van-button
      >
    </div>
  </div>
</template>
<script>
import Itemnavbar from "../components/Itemnavbar.vue";
export default {
  components: { Itemnavbar },
  data() {
    return {
      username: "",
      usernameState: "",
      email: "",
      emailState: "",
      password: "",
      passwordState: "",
      phone: "",
      phoneState: "",
      // 请求加载状态
      loading: null,
    };
  },
  methods: {
    //检查表单
    checkForm() {
      this.loading = "";
      if (
        this.checkName() &&
        this.checkEmail() &&
        this.checkPwd() &&
        this.checkPwd()
      ) {
        console.log("ok");
        let url = "/user/register";
        let params = `user_name=${this.username}&password=${this.password}&phone=${this.phone}&email=${this.email}`;
        this.axios
          .post(url, params)
          .then((res) => {
            console.log(res);
            // 注册成功 跳转到登录页面
            this.$router.push("/login");
          })
          .catch((err) => {
            console.error(err);
          });
      }
      setTimeout(() => {
        this.loading = null;
      }, 1000);
    },
    //检查用户名
    checkName() {
      let reg = /^\w{6,15}$/;
      if (reg.test(this.username)) {
        this.usernameState = "success";
        return true;
      } else {
        this.usernameState = "error";
        return false;
      }
    },
    //检查邮箱
    checkEmail() {
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (reg.test(this.email)) {
        this.emailState = "success";
        return true;
      } else {
        this.emailState = "error";
        return false;
      }
    },
    //检查密码
    checkPwd() {
      let reg = /^[a-zA-Z0-9]{6}$/;
      if (reg.test(this.password)) {
        // 验证成功
        this.passwordState = "success";
        return true;
      } else {
        // 验证失败
        this.passwordState = "error";
        return false;
      }
    },
    //检查手机号
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        // 验证成功
        this.phoneState = "success";
        return true;
      } else {
        // 验证失败
        this.phoneState = "error";
        return false;
      }
    },
  },
};
</script>

<style scoped>
.mint-cell {
  padding-left: 10%;
}
.mint-cell-wrapper {
  width: 87% !important;
}
</style>
